Don't just send people a stack of static photo files; share them in style by creating a slide show in Flash.

You will need:

A computer with internet

Adobe Flash CS4

And digital photos

Step 1: Create New Flash Document

In Adobe Flash, select "Flash File (Actionscript 3.0)" from the "Create New" menu. Switch the workspace layout by clicking on the drop-down menu box in the upper left of the top menu bar and selecting "Designer." Change the size and color of the document by adjusting the settings in the "Properties" Panel.

Step 2: Create Layers

From the timeline panel, click the "New Layer" button until you have three layers. Double-click on each layer to rename it. Starting from the bottom, name the layers: Actions, Thumbnails, and Pictures.

Step 3: Import Pictures

Import your pictures by going to File, Import, Import to Library. Browse the pictures you want to import. You can select multiple pictures by holding down the Control key and clicking multiple images. Once you've selected your images, click "Open." You'll see the imported images in the Library panel.

Step 4: Create the Thumbnail Menu

With the Thumbnails layer selected in the timeline, drag one of the imported images onto the document. In Properties, click on the chain-link icon to unconstrain the width and height values. Then, resize them both to 100. Position the image at the bottom left of the document. Repeat this process for the remaining images so that they are in a row at the bottom of the document.

TIP: Adjust the images' alignment in the row by selecting all of them and choosing the desired options from the Align panel.

Step 5: Convert the Menu to Buttons

Select the first image and hit the F8 key on the keyboard. Change the name to "btn1," change the type to "button," and click OK. In the Properties panel, change the instance name to "button1." Select the next image from the menu and repeat the process, naming it "btn2" and "button2." Continue the process for each menu item.

Step 6: Create a Photo Display

From the timeline, select the first frame of the Pictures layer. In Properties, change the name of this frame to "pic1." Drag the image corresponding with the first menu item onto the stage. Resize it in the Properties panel, remembering to click on the chain-link icon to reconstrain the width and height values. Move the image to the center of the document above the menu.

Step 7: Insert Frame

In the timeline, right-click (or command click on a Mac) on the second frame of the Thumbnails layer and select "Insert Frame."

Step 8: Add the Remaining Images

Right-click on the second frame of the Pictures layer and select "Insert BLANK keyframe." In Properties, change the name of this frame to "pic2." Now drag the next image onto the document, resizing and centering it above the menu. Repeat this process for the remaining images, incrementing the frame names each time.

Step 9: Write the Actionscript

In the timeline, select the first frame of the Actions layer and hit F9 to bring up the Actions panel. On the first line, type the stop function to stop the pages from cycling through. Hit Enter. On the next line, write a script that assigns a function to "button1." Call this function "showpic1," and hit Enter to skip a line to write a script for button2, calling the function "showpic2." Repeat for the remaining buttons.

'stop();
button1.addEventListener(MouseEvent.CLICK,showpic1);
button2.addEventListener(MouseEvent.CLICK,showpic2);
button3.addEventListener(MouseEvent.CLICK,showpic3);'

TIP: To preview the document, go to Control, Test Movie from the top menu.

Step 10: Write the Functions

Step 10. [Write the functions] When you are finished, hit Enter to skip a line and create the "showpic1" function, telling the animation to go to the "pic1" frame and stop. Hit Enter to skip to the next line and type the "showpic2" function, telling the animation to go to the "pic2" frame and stop. Repeat this process for the rest of the buttons.

'stop();
button1.addEventListener(MouseEvent.CLICK,showpic1);
button2.addEventListener(MouseEvent.CLICK,showpic2);
button3.addEventListener(MouseEvent.CLICK,showpic3);'

function showpic1(Event:MouseEvent):void{
gotoAndStop("pic1");
}

function showpic2(Event:MouseEvent):void{
gotoAndStop("pic2");
}
function showpic3(Event:MouseEvent):void{
gotoAndStop("pic3");
}''

TIP: To preview the document, go to Control, Test Movie from the top menu.

Step 11: Publish and Upload

Publish the web site by going to File, Publish Settings. Check both the SWF and HTML boxes. Rename both files and select a location to save. Then click publish, and upload all of the published files to your web server. To access the flash page, navigate to the HTML file on your web server.